@charset "UTF-8";

.input-area {
  .title {
    margin-top: .9rem;
    margin-bottom: .4rem;
  }
}
.each-input {
  $h: 1.3rem;
  width: 100%;
  height: $h;
  line-height: $h;
  border: 1px solid #C9C9C9;
  border-radius: .08rem;
  em{
    display: inline-block;
  }
  label{
    float: left;
  }
  .icon {
    transform: rotate(0deg);
    transition: all .2s;
  }
  &.select-on {
    border: none;
    box-shadow: 0 4px 8px 0 rgba(150, 150, 150, 0.50);
    -moz-border-radius: .08rem .08rem 0 0;
    -webkit-border-radius: .08rem .08rem 0 0;
    border-radius: .08rem .08rem 0 0;

    .selected-title {
      .icon {
        transform: rotate(180deg);
        transition: all .2s;
      }
    }
  }
  label {
    display: inline-block;
    width: 30%;
    padding-left: .5rem;
    color: #666;
  }
  .no-border-input {
    width: 65%;
    height: .6rem;
    line-height: .6rem;
    border: none;
    font-size: $font-base-size;
  }
  &.focus {
    border-color: $m-c;
  }
  &.error {
    border-color: red;
  }
}
.verify-input-wrap {
  #verifyInput {
    width: 52%;
  }
  .verify-tips {
    margin: 0 .2rem;
    margin-right: .4rem;
    vertical-align: -.07rem;
  }
  .verify-btn {
    float: right;
    margin-top: .1rem;
    margin-right: .1rem;
  }
}
.each-input+.each-input {
  margin-top: .4rem;
}
//验证码的输入框
.verify-input-wrap {
  input {
    padding-left: .5rem;
  }
  .verify-btn {
    $h: 1.06rem;
    line-height: $h;
    width: 3.2rem;
    height: $h;
    padding: 0rem;
    font-size: .44rem;
    @include border-radius(.08rem);
  }
}
//多选按钮
.o-checkbox {
  @include o-label(0.42rem);
  height: auto;

  input[type="checkbox"] + span {
    background: url(#{$image-base-path}icons/checkbox.png) no-repeat;
     background-size: contain!important;
  }
  input[type="checkbox"]:checked + span {
    background: url(#{$image-base-path}icons/checkbox-on.png) no-repeat;
    background-size: contain!important;
  }
  .o-checkbox-text {
    position: relative;
    top: -0.03rem;
    display: inline-block;
    float: right;
    width: 94%;
    white-space: normal;
    margin-top: 0.03rem;
  }
  &.w80 {
    width: 80%;

    .o-checkbox-text {
      width: 90%;
    }
  }
  &.w75 {
    width: 75%;

    .o-checkbox-text {
      width: 90%;
    }
  }
}
//单选
.o-radio {
  $radio-wh: 0.34rem;
  position: relative;
  min-width: 1.4rem;
  height: $radio-wh;
  line-height: $radio-wh;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;

  input {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: $radio-wh;
    cursor: pointer;
  }
  input+span {
    display: inline-block;
    width: $radio-wh;
    height: $radio-wh;
    background-size: 100% !important;
  }
  input[type="radio"]+span {
    background: url(#{$image-base-path}icons/radio.png) no-repeat;
  }
  input[type="radio"]:checked+span {
    background: url(#{$image-base-path}icons/radio-on.png) no-repeat;
  }
  .o-radio-text {
    position: relative;
    top: -0.06rem;
    left: -0.05rem;
  }
}